<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 胎儿成长</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 12px 16px 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding: 16px;
                background-color: #f9f9f9;
            }
            .card {
                background-color: #ffffff;
                border-radius: 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                margin-bottom: 16px;
            }
            .card-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
            }
            .card-title i {
                margin-right: 8px;
                color: #ff9fb5;
            }
            .tabs {
                display: flex;
                background-color: #f5f5f5;
                border-radius: 8px;
                padding: 4px;
                margin-bottom: 16px;
            }
            .tab {
                flex: 1;
                text-align: center;
                padding: 8px 0;
                font-size: 14px;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .tab.active {
                background-color: #fff;
                color: #ff9fb5;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .progress-container {
                height: 6px;
                background-color: #f0f0f0;
                border-radius: 3px;
                margin: 8px 0;
                overflow: hidden;
            }
            .progress-bar {
                height: 100%;
                background-color: #ff9fb5;
                border-radius: 3px;
            }
            .week-selector {
                height: 60px;
                overflow-x: auto;
                white-space: nowrap;
                scrollbar-width: none;
                margin-bottom: 16px;
                -ms-overflow-style: none;
            }
            .week-selector::-webkit-scrollbar {
                display: none;
            }
            .week-item {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 50px;
                height: 50px;
                margin-right: 8px;
                border-radius: 8px;
                background-color: #f5f5f5;
                cursor: pointer;
            }
            .week-item.active {
                background-color: #ff9fb5;
                color: white;
            }
            .week-item:last-child {
                margin-right: 0;
            }
            .week-number {
                font-size: 16px;
                font-weight: 600;
            }
            .week-label {
                font-size: 10px;
            }
            .fruit-comparison {
                display: flex;
                align-items: center;
                margin-bottom: 16px;
            }
            .fruit-image {
                width: 80px;
                height: 80px;
                background-color: #fff0f3;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 16px;
                font-size: 36px;
            }
            .milestone-item {
                display: flex;
                padding: 12px 0;
                border-bottom: 1px solid #f0f0f0;
            }
            .milestone-item:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }
            .milestone-icon {
                width: 32px;
                height: 32px;
                border-radius: 16px;
                background-color: #e6f7ff;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12px;
                color: #1890ff;
                flex-shrink: 0;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-arrow-left mr-4"></i>
                    <h1 class="text-lg font-medium">胎儿成长</h1>
                </div>
                <div class="flex gap-3">
                    <i class="fas fa-share-alt"></i>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 当前孕周信息 -->
                <div class="card">
                    <div class="flex justify-between items-center">
                        <div>
                            <h2 class="text-xl font-bold">第24周</h2>
                            <p class="text-sm text-gray-500">胎儿第22周</p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-medium">2023年7月20日</p>
                            <p class="text-xs text-gray-500">预产期：2023年11月5日</p>
                        </div>
                    </div>

                    <!-- 孕期进度 -->
                    <div class="mt-4">
                        <div class="flex justify-between items-center mb-1">
                            <div class="text-xs text-gray-500">孕期进度</div>
                            <div class="text-xs font-medium">24/40周</div>
                        </div>
                        <div class="progress-container">
                            <div class="progress-bar" style="width: 60%"></div>
                        </div>
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>0周</span>
                            <span>20周</span>
                            <span>40周</span>
                        </div>
                    </div>

                    <!-- 三个阶段 -->
                    <div class="flex mt-4">
                        <div class="flex-1 border-r border-gray-200 px-2">
                            <div class="text-center">
                                <div class="text-xs text-gray-500">第一孕期</div>
                                <div class="text-xs font-medium text-blue-500">已完成</div>
                            </div>
                        </div>
                        <div class="flex-1 border-r border-gray-200 px-2">
                            <div class="text-center">
                                <div class="text-xs text-gray-500">第二孕期</div>
                                <div class="text-xs font-medium text-pink-500">进行中</div>
                            </div>
                        </div>
                        <div class="flex-1 px-2">
                            <div class="text-center">
                                <div class="text-xs text-gray-500">第三孕期</div>
                                <div class="text-xs font-medium text-gray-400">未开始</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 胎儿大小 -->
                <div class="card">
                    <div class="card-title">
                        <i class="fas fa-baby"></i>
                        <span>胎儿发育状态</span>
                    </div>

                    <div class="fruit-comparison">
                        <div class="fruit-image">
                            <span>🍆</span>
                        </div>
                        <div>
                            <div class="text-lg font-medium mb-1">茄子大小</div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <div class="text-xs text-gray-500">身长</div>
                                    <div class="text-base font-medium">30厘米</div>
                                </div>
                                <div>
                                    <div class="text-xs text-gray-500">体重</div>
                                    <div class="text-base font-medium">600克</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 胎儿发育里程碑 -->
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <div class="text-sm font-medium text-blue-800 mb-2">本周发育里程碑</div>
                        <div class="text-xs text-blue-700">
                            宝宝的皮肤开始变得不那么透明，肺部正在准备呼吸，胎动更加明显，可以听到妈妈的声音了。
                        </div>
                    </div>
                </div>

                <!-- 孕周选择 -->
                <div class="card">
                    <div class="card-title">
                        <i class="fas fa-calendar-week"></i>
                        <span>各周发育概况</span>
                    </div>

                    <!-- 孕周选择器 -->
                    <div class="week-selector">
                        <div class="week-item">
                            <div class="week-number">4</div>
                            <div class="week-label">周</div>
                        </div>
                        <div class="week-item">
                            <div class="week-number">8</div>
                            <div class="week-label">周</div>
                        </div>
                        <div class="week-item">
                            <div class="week-number">12</div>
                            <div class="week-label">周</div>
                        </div>
                        <div class="week-item">
                            <div class="week-number">16</div>
                            <div class="week-label">周</div>
                        </div>
                        <div class="week-item">
                            <div class="week-number">20</div>
                            <div class="week-label">周</div>
                        </div>
                        <div class="week-item active">
                            <div class="week-number">24</div>
                            <div class="week-label">周</div>
                        </div>
                        <div class="week-item">
                            <div class="week-number">28</div>
                            <div class="week-label">周</div>
                        </div>
                        <div class="week-item">
                            <div class="week-number">32</div>
                            <div class="week-label">周</div>
                        </div>
                        <div class="week-item">
                            <div class="week-number">36</div>
                            <div class="week-label">周</div>
                        </div>
                        <div class="week-item">
                            <div class="week-number">40</div>
                            <div class="week-label">周</div>
                        </div>
                    </div>

                    <!-- 选项卡 -->
                    <div class="tabs">
                        <div class="tab active">胎儿发育</div>
                        <div class="tab">妈妈变化</div>
                        <div class="tab">健康建议</div>
                    </div>

                    <!-- 胎儿发育详情 -->
                    <div>
                        <div class="milestone-item">
                            <div class="milestone-icon">
                                <i class="fas fa-brain"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium">大脑发育</div>
                                <div class="text-xs text-gray-600 mt-1">
                                    大脑迅速发育，脑细胞连接增加，开始形成记忆和感知，对外界刺激有反应。
                                </div>
                            </div>
                        </div>

                        <div class="milestone-item">
                            <div class="milestone-icon" style="background-color: #fff0f5; color: #ff69b4">
                                <i class="fas fa-lungs"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium">肺部发育</div>
                                <div class="text-xs text-gray-600 mt-1">
                                    肺部继续发育，肺泡开始形成，虽然还不能独立呼吸，但已在为出生后的呼吸做准备。
                                </div>
                            </div>
                        </div>

                        <div class="milestone-item">
                            <div class="milestone-icon" style="background-color: #f0fff0; color: #32cd32">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium">感官发育</div>
                                <div class="text-xs text-gray-600 mt-1">
                                    眼睛开始对光有反应，耳朵可以听到外界声音，味蕾开始形成，触觉更加敏感。
                                </div>
                            </div>
                        </div>

                        <div class="milestone-item">
                            <div class="milestone-icon" style="background-color: #f5f5dc; color: #8b4513">
                                <i class="fas fa-heartbeat"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium">心脏发育</div>
                                <div class="text-xs text-gray-600 mt-1">
                                    心脏已完全形成四个心腔，血流循环正常，心率约为每分钟140-150次。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 妈妈变化卡片 -->
                <div class="card">
                    <div class="card-title">
                        <i class="fas fa-female"></i>
                        <span>准妈妈变化</span>
                    </div>

                    <div class="milestone-item">
                        <div class="milestone-icon" style="background-color: #fff0f3; color: #ff9fb5">
                            <i class="fas fa-baby-carriage"></i>
                        </div>
                        <div>
                            <div class="text-sm font-medium">身体变化</div>
                            <div class="text-xs text-gray-600 mt-1">
                                孕肚明显变大，子宫顶部已达肚脐上方约4厘米，可能出现水肿或背痛，常感到胎动。
                            </div>
                        </div>
                    </div>

                    <div class="milestone-item">
                        <div class="milestone-icon" style="background-color: #fff0f3; color: #ff9fb5">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div>
                            <div class="text-sm font-medium">情绪变化</div>
                            <div class="text-xs text-gray-600 mt-1">
                                情绪相对稳定，开始为宝宝的到来做准备，但可能有些忧虑或者兴奋，注意保持心情愉快。
                            </div>
                        </div>
                    </div>

                    <div class="milestone-item">
                        <div class="milestone-icon" style="background-color: #fff0f3; color: #ff9fb5">
                            <i class="fas fa-exclamation-circle"></i>
                        </div>
                        <div>
                            <div class="text-sm font-medium">常见不适</div>
                            <div class="text-xs text-gray-600 mt-1">
                                腰背痛、脚踝水肿、腿部抽筋、失眠、胃灼热、便秘可能会出现，需要格外关注。
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 健康建议卡片 -->
                <div class="card mb-8">
                    <div class="card-title">
                        <i class="fas fa-notes-medical"></i>
                        <span>健康建议</span>
                    </div>

                    <!-- 饮食建议 -->
                    <div class="bg-green-50 p-3 rounded-lg mb-3">
                        <div class="flex items-start">
                            <i class="fas fa-utensils text-green-500 mt-0.5 mr-2"></i>
                            <div>
                                <div class="text-sm font-medium text-green-800">饮食建议</div>
                                <div class="text-xs text-green-700 mt-1">
                                    增加铁质和钙质摄入，确保充足的蛋白质，富含叶酸的食物仍然重要，适量补充DHA有益胎儿大脑发育。
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 运动建议 -->
                    <div class="bg-blue-50 p-3 rounded-lg mb-3">
                        <div class="flex items-start">
                            <i class="fas fa-walking text-blue-500 mt-0.5 mr-2"></i>
                            <div>
                                <div class="text-sm font-medium text-blue-800">运动建议</div>
                                <div class="text-xs text-blue-700 mt-1">
                                    适量散步，可尝试孕妇瑜伽，避免剧烈运动和承重训练，注意保持正确姿势，预防腰背痛。
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 注意事项 -->
                    <div class="bg-yellow-50 p-3 rounded-lg">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-yellow-500 mt-0.5 mr-2"></i>
                            <div>
                                <div class="text-sm font-medium text-yellow-800">注意事项</div>
                                <div class="text-xs text-yellow-700 mt-1">
                                    定期产检，避免久站久坐，若出现不规则宫缩、异常阴道出血或水肿加重，请立即就医。睡觉时尽量采取左侧卧位。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-book-medical text-xl mb-1"></i>
                    <span>知识库</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </body>
</html>
